<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>流程图</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/ztree/css/metroStyle/metroStyle.css">
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="/layui/layui.all.js" charset="utf-8"></script>
  <script type="text/javascript" src="/js/common/tool.js" charset="utf-8"></script>
</head>

<body>
<div class="x-body">
  <div class="layui-tab">
    <ul class="layui-tab-title">
      <li class="layui-this">流程图</li>
      <li>流程审批</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <div id="image" style="width:100%;height:100%;overflow: auto;">
          <div class="layui-form-item">
            <image id="showImages1" style="display: none;"></image>
            <image id="showImages2"></image>
          </div>
        </div>
      </div>
      <div class="layui-tab-item tab-2">
        <ul class="layui-timeline">

        </ul>
      </div>
    </div>

  </div>
<script>
    var countNum = 0;
    // $('#image').css('height',document.body.offsetHeight);
  layui.use(['form','layer'], function(){
    $ = layui.jquery;
    //执行AJAX 获取数据
      $.getJSON('/leave/getShineProcImage?processInstanceId=[[${processInstanceId}]]', function(json){
          var result = json.images;
        let task=json.taskSqu;
        if(typeof task!=='undefined'){
          showTask(task);
        }
          var imgObj1 = document.getElementById("showImages1");
          imgObj1.src = "data:image/png;base64,"+result[0] ;
          var imgObj2 = document.getElementById("showImages2");
          imgObj2.src = "data:image/png;base64,"+result[1] ;
//          $("#showImages1").show();
          window.setInterval(function () {
              //获取网页中id=myImg的图片对象元素
//              var imgObj = document.getElementById("showImages")
//              imgObj.src = "data:image/png;base64,"+result[countNum] ;
              if(countNum==0)
              {
                  $("#showImages1").show();
                  $("#showImages2").hide();
              }else
              {
                  $("#showImages1").hide();
                  $("#showImages2").show();
              }
              countNum++;
              if (countNum==2)
              {
                  countNum = 0;//回到了原点
              }
          }, 1000);
      });
    function showTask(task) {
      var msg = '';
      for (var i = 0; i < task.length; i++) {
        var t = task[i];

        msg+= `<li class="layui-timeline-item">
                  <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                 +<br/>
                        <i class="layui-icon layui-timeline-axis">&#xe61a;</i>
                        <div class="layui-timeline-content layui-text">
                         <h3 class="layui-timeline-title">`;
        msg+=t.name;
        msg+=`</h3>
                            <p>
                                <br>审批人：`;
        msg+=t.userName;
        msg+=`
                                <br>审批时间：`;
        msg+=t.createTime;
        msg+=`
                            </p>
                        </div>
                    </li>`
      }
        let line = document.getElementsByClassName('layui-timeline')[0];
        line.innerHTML = msg;
      }
  });
</script>
</body>

</html>
